<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Package List</title>
  <link rel="stylesheet" href="./CSS/styles.css">
</head>
<body>
  <div class="left">
    <div class="logo"><img src="./imges/logo.png" alt=""></div>
    <ul>
      <li>Dashboard</li>
      <li>Package List</li>
      <li>Campus List</li>
      <li>Staff Management</li>
      <li>Courier List</li>
      <li>Trucker List</li>
    </ul>
  </div>
  <div class="right">
    <div class="right-top">
      <ul>
        <li>username</li>
        <li>Logout</li>
      </ul>
    </div>
    <div class="right-title">Package List</div>
    <div class="right-nav">
      <ul>
        <li>Filter Button:</li>
        <li class="blue">Pending pickup</li>
        <li class="blue">Picked up</li>
        <li class="blue">Pending transit</li>
        <li class="blue">In transit</li>
        <li class="blue">Pending delivery</li>
        <li class="blue">Delivering</li>
        <li class="blue">Signed</li>
      </ul>
    </div>
    <div class="search-bar">
      <input type="text" id="searchInput" placeholder="Search by tracking number, from campus, to campus">
      <button id="searchButton">Search</button>
    </div>
    <div class="filter-options">
      <label><input type="checkbox" name="filter" value="tracking" checked> Tracking No</label>
      <label><input type="checkbox" name="filter" value="from" checked> From Campus</label>
      <label><input type="checkbox" name="filter" value="to" checked> To Campus</label>
      <label><input type="checkbox" name="filter" value="status" checked> Status</label>
      <label><input type="checkbox" name="filter" value="detail" checked> Detail</label>
    </div>
    <div class="package-list">
      <!-- Package list will be populated by JavaScript -->
    </div>
    <div class="pagination">
      <button id="prevPage">Previous</button>
      <span id="pageInfo">Page 1 of 1</span>
      <button id="nextPage">Next</button>
    </div>
  </div>
  <script src="./js/script.js"></script>
</body>
</html>